<template>
  <view class="card">
    <view class="main" @tap="goDetail()">
      <view class="main-icon">
        <i-icon
          v-if="info.isgover"
          icon="iconguanxun"
          type="single"
          size="36rpx"
          color="#EB5C02"
        ></i-icon>
        <i-icon
          v-else
          icon="iconxun"
          type="single"
          size="36rpx"
          color="#FBB000"
        ></i-icon>
      </view>
      <view class="info">
        <view class="line con-line">
          <view class="name">
            <image
              class="car-icon"
              :src="'https://files.yzsheng.com' + info.brand_logo"
              mode="aspectFill"
            ></image>
            车型：
          </view>
          <text class="con font-28">
            {{ info.brand_name }} {{ info.car_type_name
            }}{{ info.configuration_name }}
          </text>
          <text class="state">{{ status[info.quote_status] }}</text>
        </view>
        <view class="line" v-if="info.vin_no">
          <text class="name">VIN:</text>
          <text class="con">{{ info.vin_no }}</text>
        </view>
        <view class="line">
          <text class="name">需求配件：</text>
          <text class="con pei-con">{{ accessoryDetails }}</text>
        </view>
        <view class="line">
          <text class="name">地区：</text>
          <text class="con"> {{ info.provinceName }} {{ info.cityName }}</text>
        </view>
        <view class="line">
          <text class="name">发布日期</text>
          <text class="con">{{ dateFormat(info.addtime, 'MM/DD HH:mm') }}</text>
        </view>
        <view class="flex-line">
          <view class="line">
            <text class="name">有效期至：</text>
            <text class="con">{{
              dateFormat(info.effective_time, 'MM/DD')
            }}</text>
          </view>
          <view class="line last-time"> 剩余询价时间：{{ remainder }} </view>
        </view>
        <view class="line">
          <text class="name">询价人：</text>
          <view class="con flex flex-ac-fs">
            <text class="ma">{{ formatName }}</text>
            <view class="image-icon">
              <i-icon
                v-if="info.user_status"
                class="icon-store"
                icon="iconshenfenrenzheng"
                type="single"
                size="44rpx"
                color="#60C534"
              ></i-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bar">
      <view class="left person-price">
        <view class="line">
          <text class="orange">{{ info.browse_number }}次</text>
          <text>浏览/</text>
          <text class="orange">{{ info.quote_number }}人</text>
          <text>报价</text>
        </view>
      </view>

      <view class="right" v-if="info.quote_status !== 25">
        <view class="tool-btn-group">
          <button
            class="custom-style bg-fff"
            v-if="info.quote_status !== 30"
            @click="cancel"
          >
            {{ info.quote_status === 0 ? '删除询价' : '取消询价' }}
          </button>
          <button
            class="custom-style"
            v-if="info.quote_status !== 20"
            @click="edit"
          >
            {{ info.quote_status === 10 ? '编辑' : '上架' }}
          </button>
        </view>
        <!--        分享按钮，暂时不做 -->
        <!--        <view class="tips">-->
        <!--          <i-icon icon="iconfenxiang1"  type='multiple'  size='34rpx' ></i-icon>-->
        <!--        </view>-->
      </view>
    </view>
  </view>
</template>

<script>
import { dateFormat, dayDiff } from '@/utils/formatDate.js'

export default {
  data() {
    return {
      remainder: '',
      resetDate: '', //重新上架的有效期
    }
  },

  props: {
    info: {
      type: Object,
      default() {
        return {}
      },
    },
  },

  computed: {
    status() {
      return this.$store.state.accessory.status
    },
    accessoryDetails() {
      let str = ''
      for (let i = 0; i < this.info.car_part_details.length; i++) {
        str =
          str +
          this.info.car_part_details[i].part_category_name +
          '*' +
          this.info.car_part_details[i].purchase_number +
          '；'
      }
      return str
    },
    formatName() {
      return (
        this.info.truename.slice(0, 1) +
        '*'.repeat(this.info.truename.length - 1)
      )
    },
  },

  mounted() {
    this.remainder = this.dayDiff(this.info.effective_time)
    if (this.info.quote_status === 0 || this.info.quote_status === 30) {
      this.getResetDate()
    }
  },
  methods: {
    dateFormat,
    dayDiff,

    //跳转详情
    goDetail() {
      const version = uni.getSystemInfoSync().system + ''
      this.$api.accessory.addCarPartBrowseNumber({
        id: this.info.id,
        system: 1,
        platform: 1,
        module: 1,
        version,
      })
      if (this.info.quote_status === 20) {
        uni.navigateTo({
          url:
            '/pages_findAccessory/orderAccessory/orderAccessory?id=' +
            this.info.id,
        })
      } else {
        uni.navigateTo({
          url:
            '/pages_findAccessory/myInquiryDetail/myInquiryDetail?id=' +
            this.info.id,
        })
      }
    },

    //取消询价 删除询价
    cancel() {
      if (this.info.quote_status === 0) {
        //删除
        uni.$emit('showModal', {
          type: 'del',
          id: this.info.id,
        })
      } else {
        //取消
        uni.$emit('showModal', {
          type: 'cancel',
          id: this.info.id,
        })
      }
    },

    //编辑
    edit() {
      if (this.info.quote_status === 10) {
        //编辑
        uni.navigateTo({
          url:
            '/pages_findAccessory/newInquiry/newInquiry?type=1&id=' +
            this.info.id,
        })
      } else {
        //  上架
        uni.$emit('showModal', {
          type: 'reset',
          date: this.resetDate,
          id: this.info.id,
        })
      }
    },

    //重新上架有效期
    getResetDate() {
      const now = new Date().getTime() + 7 * 86400000
      this.resetDate = this.dateFormat(now)
    },
  },
}
</script>

<style lang="scss" scoped>
@mixin center() {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

@mixin point() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
}

@mixin point2() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
}

@mixin justify() {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
  background: #fff;
  margin: 0 24rpx 24rpx;
  border-radius: 10rpx;
  overflow: hidden;

  &:nth-child(1) {
    border-radius: 0 0 10rpx 10rpx;
  }

  .main {
    border-bottom: 2rpx solid #f5f5f5;
    padding: 32rpx 0 25rpx;
    margin: 0 16rpx;
    overflow: hidden;

    .main-icon {
      float: left;
      width: 36rpx;
      height: 36rpx;
      overflow: hidden;

      image {
        width: 36rpx;
        height: 36rpx;
      }
    }

    .info {
      width: 91%;
      float: right;

      .title {
        overflow: hidden;

        .icon {
          margin-top: 8rpx;
          width: 36rpx;
          height: 36rpx;
          @include center;
          float: left;

          image {
            width: 36rpx;
            height: 36rpx;
          }
        }

        .icon-main {
          float: left;
          width: 392rpx;
          @include point2;
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 46rpx;
        }
      }

      .line {
        display: flex;
        overflow: hidden;
        margin: 10rpx 0;
        font-size: 26rpx;
        font-weight: 500;
        color: #9a9a9a;

        .state {
          color: #eb5c02;
        }

        .name {
          width: 130rpx;

          .car-icon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 15rpx;
          }
        }

        .con {
          flex: 1;
          color: #343434;

          .icon-store {
            padding-left: 6rpx;
          }
        }

        .orange {
          color: #eb5b01;

          &.import {
            @include point;
          }
        }

        &:nth-child(1) {
          margin: 0 0 10rpx;
        }

        .pei-con {
          @include point2;
          padding: 8rpx 16rpx;
          width: 494rpx;
          background: #fff6ce;
          border-radius: 5rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 40rpx;
        }
      }

      .con-line {
        .con {
          max-width: 400rpx;
        }
      }

      .flex-line {
        @include justify;

        .line {
          margin: 0;
        }
      }
    }
  }

  .bar {
    @include justify;
    overflow: hidden;
    padding: 20rpx 0 20rpx;
    margin: 0 16rpx;
    border-bottom: 2rpx solid #f5f5f5;

    .person-price {
      font-size: 24rpx;
      color: #666666;

      .orange {
        color: #eb5c02;
      }
    }

    .left {
      line-height: 60rpx;
      float: left;

      .store-name {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        float: left;
        @include point;
        width: 472rpx;
      }

      .bar-bottom {
        overflow: hidden;

        clear: both;

        .user-name {
          float: left;
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
        }

        .icon-group {
          float: left;
          margin-left: 20rpx;

          image {
            &:nth-child(1) {
              width: 44rpx;
              height: 28rpx;
            }

            &:nth-child(2) {
              width: 90rpx;
              height: 30rpx;
              margin: 0 10rpx;
            }

            &:nth-child(3) {
              width: 30rpx;
              height: 32rpx;
            }
          }
        }
      }
    }

    .right {
      display: flex;
      align-items: center;

      .tool-btn-group {
        display: flex;
        padding-right: 8rpx;

        .custom-style {
          width: 150rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 28rpx;
          color: #333;
          margin-left: 24rpx;
          font-weight: 500;
          border-radius: 30rpx;
          padding: 0;
          border: 1rpx solid #d0d0d0;
        }
        .bg-fff {
          background: #fff;
        }
      }

      display: flex;
      float: right;

      .tips {
        @include center;
      }

      .share-icon {
        width: 34rpx;
        height: 33rpx;
      }
    }
  }
}

///deep/ .u-hairline-border:after {
//  border: 1px solid #d0d0d0;
//}
</style>
